
import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaProgress, WeaSteps } from "ecCom";
import { Timeline, Icon, Button  } from 'antd';
const Step = WeaSteps.Step;
import './style/index.css';

@inject('actualBillStore')
@observer
export default class ActualBillGroup extends React.Component {
	constructor(props) {
		super(props);
		const item = props.item||{};
		this.state = {
			showRecord: false,
			showEdit: false,
			item: item
		}
	}

	showDetail=(id,type=0)=>{
		const {modeInfo} = this.props.actualBillStore;
		window.open(`#/main/cube/card?type=${type}&billid=${id}&modeId=${modeInfo.modeId}&formId=${modeInfo.formId}`);
	}

	showOperate=(showEdit)=>{
		this.setState({showEdit:showEdit});
	}
	render() {
		const { payType, payTypeName, rights } = this.props.actualBillStore;
		const { showRecord, showEdit, item } = this.state;
		const { ticketData = [] } = item;
		const hasRecords = ticketData.length > 0;
		return (
			<div>
				{
					<Timeline.Item color={payType==="1"?"#CD3F3D":"#028102" } 
						dot={<Icon type="pay-circle" style={{ fontSize: '23px', color: (payType==="1"?"#CD3F3D":"#028102") }} />}
						onMouseOver={(bool)=>this.showOperate(true)} onMouseOut={(bool)=>this.showOperate(false)}
					>
						<table className={'wea-contract-synergy-actual-tb'} >
							<tr>
								<td className={"item"}>{payTypeName}款日期:</td>
								<td>{item.pay_date||"-"}</td>
							</tr>
							<tr>
								<td className={"item"}>{payTypeName}款金额:</td>
								<td>￥{item.pay_count||0}</td>
							</tr>
							<tr>
								<td className={"item"}>{payTypeName}款人:</td>
								<td>{item.usr||""}</td>
							</tr>
							<tr>
								<td className={"item"}>{payTypeName}款比例:</td>
								<td><WeaProgress className={"progress"} percent={item.proportion} strokeColor="#108ee9" strokeWidth={8} status="active" />
									<div className={"operate"}>
										{JSON.stringify(rights[item.id])&&rights[item.id].view?<span onClick={()=>this.showDetail(item.id,0)} className="icon-coms-Journal" style={{display:showEdit?"inline-block":"none",color:"#108ee9",cursor:'pointer',marginRight:'15px'}} title="详情"></span>:null}
										{JSON.stringify(rights[item.id])&&rights[item.id].edit?<span onClick={()=>this.showDetail(item.id,2)} className="icon-coms-Journal-o" style={{display:showEdit?"inline-block":"none",color:"#108ee9",cursor:'pointer',marginRight:'15px'}} title="编辑"></span>:null}
										{hasRecords?<span className={"record"} onClick={() => this.setState({ showRecord: !showRecord })}>开票记录<span className={showRecord ? "icon-coms-down2" : "icon-coms-up2"} style={{ paddingLeft: '5px',cursor:'pointer' }} /></span>:null}
									</div>
								</td>
							</tr>
							{showRecord? <tr>
								<td colspan="2">
									<WeaSteps className="step" size="small" current={4} >
										{ticketData.map((step)=>{
											return (<Step title={step.ticketDate||"-"} description={"￥"+step.ticketCount||0} />);
										})}
									</WeaSteps>
								</td>
							</tr> : null}
						</table>
					</Timeline.Item>
				}
			</div>
		)
	}
}